// 基础交互逻辑
document.querySelectorAll('.nav-item').forEach(item => {
    item.addEventListener('click', function() {
        document.querySelector('.nav-item.active').classList.remove('active');
        this.classList.add('active');
        toggleSections(this.textContent.trim());
    });
});
//确定需求
document.querySelector('.confirmsub-btn').addEventListener('click', function() {
    // 模拟获取数据
    const data = {
        mindMap: '这是模拟的需求脑图数据',
        description: '这是模拟的需求描述数据'
    };

    // 更新需求脑图
    const mindMapElement = document.querySelector('.mind-map div');
    mindMapElement.textContent = data.mindMap;

    // 更新需求描述
    const descriptionElement = document.querySelector('.description textarea');
    descriptionElement.value = data.description;
});
// 文件上传触发
document.querySelector('.upload-btn').addEventListener('click', function() {
    this.querySelector('input').click();
});

// 下拉菜单显示隐藏
document.querySelectorAll('.dropdown-content div').forEach(item => {
    item.addEventListener('click', function(e) {
        e.stopPropagation(); // 阻止冒泡到document
        const parentDropdown = this.closest('.dropdown');
        parentDropdown.querySelector('.dropdown-content').style.display = 'none';
    });
});
// 动态生成的选项需要事件委托
document.body.addEventListener('click', function(e) {
    if (e.target.closest('.dropdown-content div')) {
        e.stopPropagation();
        const dropdown = e.target.closest('.dropdown');
        dropdown.querySelector('.dropdown-content').style.display = 'none';
    }
});
//
document.addEventListener('DOMContentLoaded', function() {
    const mainDemandDropdown = document.querySelector('.main-demand-dropdown');
    const subDemandDropdown = document.querySelector('.sub-demand-dropdown');
    const rightContent = document.querySelector('.maintenance-container .right-content');
    const overviewOption = document.getElementById('overview-option');
    const subDemandOption = document.getElementById('sub-demand-option');
    const overview = document.querySelector('.overview');

    const subDemands = {
        1: ['子需求1-1', '子需求1-2'],
        2: ['子需求2-1', '子需求2-2']
    };

    // 显示下拉框内容
    mainDemandDropdown.addEventListener('click', function(event) {
        event.stopPropagation(); // 阻止事件冒泡
        const dropdownContent = mainDemandDropdown.querySelector('.dropdown-content');
        dropdownContent.style.display = dropdownContent.style.display === 'block' ? 'none' : 'block';
    });

    subDemandDropdown.addEventListener('click', function(event) {
        event.stopPropagation(); // 阻止事件冒泡
        const dropdownContent = subDemandDropdown.querySelector('.dropdown-content');
        dropdownContent.style.display = dropdownContent.style.display === 'block' ? 'none' : 'block';
    });

    // 点击下拉框选项
    mainDemandDropdown.querySelector('.dropdown-content').addEventListener('click', function(event) {
        event.stopPropagation(); // 阻止事件冒泡
        const selectedDemandId = event.target.getAttribute('data-demand-id');
        const selectedDemandName = event.target.textContent;

        // 更新子需求下拉框
        const subDropdownContent = subDemandDropdown.querySelector('.dropdown-content');
        subDropdownContent.innerHTML = '';
        subDemands[selectedDemandId].forEach(subDemand => {
            const div = document.createElement('div');
            div.textContent = subDemand;
            subDropdownContent.appendChild(div);
        });

        // 更新概览
        overview.innerHTML = `<h3 style="margin-bottom: 12px; color: #333;">主需求名称：${selectedDemandName}</h3>`;
    });

    subDemandDropdown.querySelector('.dropdown-content').addEventListener('click', function(event) {
        const selectedSubDemand = event.target.textContent;
        overview.innerHTML += `<h3 style="margin-bottom: 12px; color: #333;">子需求名称：${selectedSubDemand}</h3>`;
    });
    
    // 点击其他地方关闭下拉框
    document.addEventListener('click', function() {
        const dropdowns = document.querySelectorAll('.dropdown-content');
        dropdowns.forEach(dropdown => {
            dropdown.style.display = 'none';
        });
    });

    // 点击概览选项
    overviewOption.addEventListener('click', function() {
        rightContent.innerHTML = `
            <div class="overview">
                <h3 style="margin-bottom: 12px; color: #333;">某需求的概览：</h3>
            </div>
            <div class="horizontal-layout">
                <div class="mind-map">
                    <h3 style="margin-bottom: 12px; color: #333;">需求脑图</h3>
                    <div style="height: calc(100% - 40px); border: 1px dashed #ddd;
                         border-radius: 4px; display: grid; place-items: center;
                         color: #999;">
                        脑图区域（可集成专业脑图库）
                    </div>
                </div>
                
                <div class="description">
                    <h3 style="margin-bottom: 12px; color: #333;">需求描述</h3>
                    <textarea placeholder="请输入详细的需求描述..."></textarea>
                </div>
            </div>
            <div class="history-section">
                <h3 style="margin-bottom: 12px; color: #333;">历史修改：</h3>
                <div class="history-item">
                    <div class="content">某人修改：</div>
                    <div class="content">原内容：<br>...</div>
                    <div class="content">修改为：<br>...</div>
                </div>
            </div>
            <button class="save-btn">保存</button>
        `;
    });

    // 点击子需求选项
    subDemandOption.addEventListener('click', function() {
        rightContent.innerHTML = `
            <div class="overview">
                <h3 style="margin-bottom: 12px; color: #333;">子需求名称：</h3>
            </div>
            <div class="horizontal-layout">
                <div class="mind-map">
                    <h3 style="margin-bottom: 12px; color: #333;">需求脑图</h3>
                    <div style="height: calc(100% - 40px); border: 1px dashed #ddd;
                         border-radius: 4px; display: grid; place-items: center;
                         color: #999;">
                        脑图区域（可集成专业脑图库）
                    </div>
                </div>
                
                <div class="description">
                    <h3 style="margin-bottom: 12px; color: #333;">需求描述</h3>
                    <textarea placeholder="请输入详细的需求描述..."></textarea>
                </div>
            </div>
            <div class="history-section">
                <h3 style="margin-bottom: 12px; color: #333;">历史修改：</h3>
                <div class="history-item">
                    <div class="content">某人修改：</div>
                    <div class="content">原内容：<br>...</div>
                    <div class="content">修改为：<br>...</div>
                </div>
            </div>
            <button class="save-btn">保存</button>
        `;
    });

    // 初始状态显示提示信息
    rightContent.innerHTML = '<div class="overview"><h3 style="margin-bottom: 12px; color: #333;">请选择需求</h3></div>';
});

// 切换显示的部分
function toggleSections(activeTab) {
    const container = document.querySelector('.container');
    const maintenanceContainer = document.querySelector('.maintenance-container');
    const messagesContainer = document.querySelector('.messages-container');
    const changePasswordContainer = document.querySelector('.change-password-container');
    container.style.display = 'none';
    maintenanceContainer.style.display = 'none';
    messagesContainer.style.display = 'none';
    changePasswordContainer.style.display = 'none';

    if (activeTab === '需求维护池') {
        maintenanceContainer.style.display = 'flex';
    } else if (activeTab === '消息') {
        messagesContainer.style.display = 'flex';
    } else {
        container.style.display = 'flex';
    }
}

// 用户信息下拉菜单
document.querySelector('.user-info').addEventListener('click', function() {
    const dropdown = this.querySelector('.user-dropdown');
    dropdown.style.display = dropdown.style.display === 'block' ? 'none' : 'block';
});

// 修改密码按钮逻辑
document.getElementById('change-password-btn').addEventListener('click', function() {
    document.querySelector('.change-password-container').style.display = 'flex';
    document.querySelector('.user-dropdown').style.display = 'none';
});

// 返回按钮逻辑
document.getElementById('return-to-user-info').addEventListener('click', function() {
    document.querySelector('.change-password-container').style.display = 'none';
    document.querySelector('.user-dropdown').style.display = 'block';
});

// 回复按钮逻辑
        document.querySelectorAll('.reply-btn').forEach(button => {
            button.addEventListener('click', function() {
                const replyBox = this.parentElement.querySelector('.reply-box');
                replyBox.style.display = replyBox.style.display === 'block' ? 'none' : 'block';
            });
        });
// 确认回复按钮逻辑
        document.querySelectorAll('.confirm-btn').forEach(button => {
            button.addEventListener('click', function() {
                const replyTextarea = this.parentElement.querySelector('.reply-textarea');
                const replyContent = replyTextarea.value;
                
                if (replyContent.trim() === '') {
                    alert('请输入回复内容');
                    return;
                }
                
                // 这里可以添加将回复内容发送到后端等实际逻辑
                console.log('回复内容:', replyContent);
                
                // 添加新消息到消息列表
                const messageList = this.closest('.right-content').querySelector('.message-list');
                const now = new Date();
                const timeString = now.getFullYear() + '-' + 
                                  (now.getMonth() + 1).toString().padStart(2, '0') + '-' + 
                                  now.getDate().toString().padStart(2, '0') + ' ' + 
                                  now.getHours().toString().padStart(2, '0') + ':' + 
                                  now.getMinutes().toString().padStart(2, '0');
                
                const newMessage = document.createElement('div');
                newMessage.className = 'message-item reply-message';
                newMessage.innerHTML = `
                    <div class="sender">专家</div>
                    <div class="content">${replyContent}</div>
                    <div class="time">${timeString}</div>
                `;
                
                messageList.appendChild(newMessage);
                
                // 简单隐藏回复框并清空内容
                const replyBox = this.parentElement;
                replyBox.style.display = 'none';
                replyTextarea.value = '';
                
                // 滚动到底部
                messageList.scrollTop = messageList.scrollHeight;
            });
        });
        document.querySelectorAll('.demand-item').forEach(item => {
            item.addEventListener('click', function() {
                // 移除所有需求项的active类
                document.querySelectorAll('.demand-item').forEach(i => i.classList.remove('active'));
                // 给当前点击的需求项添加active类
                this.classList.add('active');
                
                // 更新右侧内容
                const demandName = this.textContent;
                document.querySelector('.demand-name').textContent = `需求名称：${demandName}`;
                
                // 清空消息列表
                const messageList = document.querySelector('.message-list');
                messageList.innerHTML = '';
                
                // 根据不同需求添加不同消息
                if (demandName.includes('需求一')) {
                    messageList.innerHTML = `
                        <div class="message-item comment">
                            <div class="sender">用户11111</div>
                            <div class="content">请问这个需求什么时候可以完成？我比较着急。</div>
                            <div class="time">2023-05-20 10:30</div>
                        </div>
                        <div class="message-item reply-message">
                            <div class="sender">我的回复：</div>
                            <div class="content">您好，这个需求我们正在处理中，预计下周可以完成。</div>
                            <div class="time">2023-05-20 11:15</div>
                        </div>
                        <div class="message-item comment">
                            <div class="sender">用户11111</div>
                            <div class="content">好的，谢谢，希望能按时完成。</div>
                            <div class="time">2023-05-20 14:20</div>
                        </div>
                        <div class="message-item reply-message">
                            <div class="sender">我的回复：</div>
                            <div class="content">我们会尽快处理，请您放心。</div>
                            <div class="time">2023-05-20 15:30</div>
                        </div>
                    `;
                } else if (demandName.includes('需求二')) {
                    messageList.innerHTML = `
                        <div class="message-item comment">
                            <div class="sender">用户22222</div>
                            <div class="content">这个需求的预算是多少？</div>
                            <div class="time">2023-05-18 09:45</div>
                        </div>
                        <div class="message-item reply-message">
                            <div class="sender">我的回复</div>
                            <div class="content">您好，这个需求的预算大概在5000 - 8000元左右。</div>
                            <div class="time">2023-05-18 10:20</div>
                        </div>
                        <div class="message-item comment">
                            <div class="sender">用户22222</div>
                            <div class="content">好 的，能否提供更详细的预算清单？</div>
                            <div class="time">2023-05-18 14:30</div>
                        </div>
                    `;
                }
            });
        });

        // 获取验证码按钮逻辑
        document.getElementById('get-verification-code').addEventListener('click', function() {
            // 这里添加获取验证码的逻辑
            alert('验证码已发送到您的手机/邮箱');
            // 禁用按钮并设置倒计时
            this.disabled = true;
            let countdown = 60;
            this.textContent = `${countdown}秒后重试`;
            const timer = setInterval(() => {
                countdown--;
                this.textContent = `${countdown}秒后重试`;
                if (countdown <= 0) {
                    clearInterval(timer);
                    this.disabled = false;
                    this.textContent = '获取';
                }
            }, 1000);
        });

        // 确认修改密码按钮逻辑
        document.getElementById('confirm-change-password').addEventListener('click', function() {
            const verificationCode = document.getElementById('verification-code').value;
            const newPassword = document.getElementById('new-password').value;
            const confirmPassword = document.getElementById('confirm-password').value;
            
            // 验证验证码
            if (!verificationCode) {
                alert('请输入验证码');
                return;
            }
            
            // 验证新密码
            if (!newPassword) {
                alert('请输入新密码');
                return;
            }
            
            if (newPassword.length < 6) {
                alert('密码长度至少6位');
                return;
            }
            
            // 验证确认密码
            if (!confirmPassword) {
                alert('请再次输入新密码');
                return;
            }
            
            if (newPassword !== confirmPassword) {
                alert('两次输入的密码不一致');
                return;
            }
            
            // 这里添加实际修改密码的逻辑
            alert('密码修改成功');
            
            // 返回用户信息页面
            document.querySelector('.change-password-container').style.display = 'none';
            document.querySelector('.user-dropdown').style.display = 'block';
        });

        // 上传头像逻辑
        document.getElementById('upload-avatar-link').addEventListener('click', function(e) {
            e.preventDefault();
            document.getElementById('avatar-upload').click();
        });

        document.getElementById('avatar-upload').addEventListener('change', function() {
            const file = this.files[0];
            if (file) {
                const reader = new FileReader();
                reader.onload = function(e) {
                    // 这里可以添加上传头像到服务器的逻辑
                    // 目前只是更新页面上的头像显示
                    document.querySelector('.upload-avatar img').src = e.target.result;
                    document.querySelector('.avatar').style.backgroundImage = `url(${e.target.result})`;
                };
                reader.readAsDataURL(file);
            }
        });

        // 提交评论逻辑
        document.querySelector('.submit-btn').addEventListener('click', function() {
            const commentText = document.querySelector('.input-demand').value;
            if (commentText.trim() === '') {
                alert('请输入评论内容');
                return;
            }
            
            // 这里添加提交评论到服务器的逻辑
            console.log('提交评论:', commentText);
            
            // 显示成功提示
            alert('评论提交成功！');
            
            // 清空输入框
            document.querySelector('.input-demand').value = '';
        });